import React from "react";
import { Form, Col, Input, Row,Divider } from "antd";
import {LeftOutlined,AlignLeftOutlined} from "@ant-design/icons";
import methodGroup from "./extract/methodGroup";
import accessoryGroup from "./extract/accessoryGroup";

  const getFields = () => {
    return (
      <React.Fragment>
        <Col span={24}>
          <div   className="headAddShop">
            <Row>
            <Col span={8}>
              <LeftOutlined  style={{fontSize:30,paddingLeft:10,paddingTop:10,paddingBottom:10 }}/>
              </Col>
              <Col span={8} style={{paddingLeft:100,paddingTop:10,paddingBottom:10}}>
                <span style={{center:30,fontSize:20}}>新菜品</span>
              </Col>

              <Col span={8} style={{paddingTop:10,paddingBottom:10,paddingRight:10,paddingLeft:160}}>
                
                <AlignLeftOutlined/>
              </Col>
            </Row>
          </div>
        </Col>

            {/** 通用消息 */}
          <Col span={24} >
            <div className="headlineClass">
            通用消息
            </div>
            
          </Col>
          <Col span={24}>
        
          <Row className="divfix">
          <Col span={4}  className="leftCommDiv">
            菜品名
          </Col>
          <Col span={20}>
          <Form.Item 
          name="name"
          rules={[{ required: true,message:"请输入菜品"},{max:10,message:"长度过大"}]}
          >
            <Input  style={{width:'100%',borderTopRightRadius:10,borderBottomRightRadius:10}}/>
            </Form.Item>
            </Col>
          </Row>
         
          </Col>
      <Col span={24}>
        <Row>
          <Col span={12}>
        
          <Row className="divfix">
          <Col span={8}  className="leftCommDiv">
            商品单价
          </Col>
          <Col span={16}>
          <Form.Item 
          name="unitPrice"
          rules={[{ required: true,message:"请输入价格"},{pattern:/^[0-9 | .]+$/,message:"参数不合法"},
          {
            validator: async (_, values) => {
             
              if ( parseFloat(values) > 999.99 || parseFloat(values) < 0.99 ) {
                return Promise.reject(new Error('价格区域错误请输入0.99~999.99之间'));
              }
            },
          },
        ]}
          >
            <Input  style={{width:'100%',borderTopRightRadius:10,borderBottomRightRadius:10}}/>
            </Form.Item>
            </Col>
          </Row>
      
          </Col>
          <Col span={12}>
         
          <Row className="divfix">
          <Col span={8}  className="leftCommDiv">
            计量单位
          </Col>
          <Col span={16}>
          <Form.Item 
          name="unitOfMeasure"
          rules={[{ required: true,message:"计量单位"},{max:5,message:"长度过大"}]}
          >
            <Input  style={{width:'100%',borderTopRightRadius:10,borderBottomRightRadius:10}}/>
            </Form.Item>
            </Col>
          </Row>
      
          </Col>
        </Row>

      </Col>

      <Col span={24}>
        <Row>
          <Col span={12}>
         
          <Row className="divfix">
          <Col span={8}  className="leftCommDiv">
            起售量
          </Col>
          <Col span={16}>
          <Form.Item 
          name="minSalesQuantity"
          rules={[{ required: true,message:"请填入起售量"},
          {
            validator: async (_, values) => {
            
              if ( parseFloat(values) > 100 || parseFloat(values) < 1 ) {
                return Promise.reject(new Error('起售量区间错误'));
              }
            },
          },
        ]}
          >
            <Input  style={{width:'100%',borderTopRightRadius:10,borderBottomRightRadius:10}}/>
            </Form.Item>
            </Col>
          </Row>
        
          </Col>
          <Col span={12}>
         
          <Row className="divfix">
          <Col span={8}  className="leftCommDiv">
            增售量
          </Col>
          <Col span={16}>
          <Form.Item 
          name="increaseSalesQuantity"
          rules={[{ required: true,message:"请填入增售量"},
          {
            validator: async (_, values) => {
            
              if ( parseFloat(values) > 100 || parseFloat(values) < 1 ) {
                return Promise.reject(new Error('起售量区间错误'));
              }
            },
          },
        ]}
          >
            <Input  style={{width:'100%',borderTopRightRadius:10,borderBottomRightRadius:10}}/>
            </Form.Item>
            </Col>
          </Row>
         
          </Col>
        </Row>

      </Col>
 


        <Col span={24}>
     
          <Row className="divfix">
          <Col span={4}  className="leftCommDiv">
            描述
          </Col>
          <Col span={20}>
          <Form.Item 
          name="description"
          rules={[{max:100,message:"长度过大"}]}
          >
            <Input  style={{width:'100%',borderTopRightRadius:10,borderBottomRightRadius:10}}/>
            
          </Form.Item>
            </Col>
          </Row>
        </Col>
        
        {methodGroup()}
        {accessoryGroup()}
        <Divider/>       
      </React.Fragment>
    );
  };
  export default getFields;